<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr hidden>
            <td><label for="">id：</label></td>
            <td><input type="text" id="id"></td>
        </tr>
        <tr>
            <td><label for="">商品名称：</label></td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td><label for="">价格：</label></td>
            <td><input type="text" id="price"></td>
        </tr>
        <tr>
            <td><label for="">库存数量：</label></td>
            <td><input type="text" id="stock"></td>
        </tr>
        <tr>
            <td><label for="">供应商：</label></td>
            <td><input type="text" id="supplier"></td>
        </tr>
        <tr>
            <td><input type="button" value="保存" onclick="save()"></td>
            <td><input type="button" value="取消" onclick="cancel()"></td>
        </tr>
    </table>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/product_api.js"></script>
    <script>
        $(function () {
            let id = getUrlParam('id')
            // 如果id存在，则需要根据id获取相对于的信息
            if (id) {
                getProductId(id).then(res => {
                    console.log(res);
                    // 根据后端接口返回的数据，拿到id对应的商品对象
                    let data = res.data
                    // 如果商品对象存在，则利用jq对节点dom赋值
                    if (data) {
                        $('#id').val(data.id),
                            $('#name').val(data.name),
                            $('#price').val(data.price),
                            $('#stock').val(data.stock),
                            $('#supplier').val(data.supplier)
                    }
                })
            }
        })
        // 获取url中的参数 其中name指的是url中的键的名称
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) {
                return unescape(r[2]);
            } else {
                return null; //返回参数值
            }

        }
        // 保存按钮
        function save() {
            /*
                拿到要传递的数据发送给指定的api接口，成功后返回列表页，失败后，则弹出提示
                1、拿到要传递的数据
                2、发送数据到指定的api接口，发送请求
                3、根据结果，做不同的处理，成功则跳转列表页，失败在弹出提示
            */
            let obj = {
                id: $('#id').val(),
                name: $('#name').val(),
                price: $('#price').val(),
                stock: $('#stock').val(),
                supplier: $('#supplier').val(),
            }
            console.log(obj);
            // 如果id存在，则保存的时候为编辑的保存
            if (obj.id) {
                putProduct(obj.id,obj).then(res=>{
                    console.log(res);
                    // 编辑后保存成功跳转回首页
                    if(res.code==1000){
                        location.href='./index.html'
                    }else{
                        alert(code.msg)
                    }
                })
            } else {  //id不存在，保存为新增保存
                postProduct(obj).then(data => {
                    if (data.code === 1000) {
                        location.href = './index.html'
                    } else {
                        alert(data.msg)
                    }
                })
            }
        }
        // 取消按钮
        function cancel() {
            location.href = './index.html'
        }
    </script>
</body>

</html>